<template>
  <div class="manage">
    <el-dialog
            :title="operateType === 'add' ? '新增用户' : '更新用户'"
            :visible.sync="isShow">
      <CommonForm
              :formLabel="operateFormLabel"
              :form="operateForm"
              :inline="true"
              ref="form">
      </CommonForm>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
    <div class="manageheader">
      <el-button type="primary" @click="addUser">新增</el-button>
      <CommonForm
              :formLabel="formLabel"
              :form="searchFrom"
              :inline="true"
              ref="formTa">
        <el-button type="primary" @click="getList(searchFrom.keyword)">搜索</el-button>
      </CommonForm>
    </div>
    <commonTable
            :tableData="tableData"
            :tableLabel="tableLabel"
            :config="config"
            @changePage="getList()"
            @edit="editUser"
            @del="delUser">

    </commonTable>
  </div>
</template>

<script>
    import CommonForm from 'components/CommonForm.vue'
    import CommonTable from 'components/CommonTable.vue'
    import {getUser} from '@Api/data.js';

    export default {
        name: 'User',
        components: {
            CommonForm, CommonTable
        },
        data() {
            return {
                operateType: 'add',
                isShow: false,
                operateFormLabel: [
                    {
                        model: "name",
                        label: "姓名",
                        type: "input",
                    },
                    {
                        model: "age",
                        label: "年龄",
                        type: "input",
                    },
                    {
                        model: "sex",
                        label: "性别",
                        type: "select",
                        opts: [
                            {
                                label: "男",
                                value: 1,
                            },
                            {
                                label: "女",
                                value: 0,
                            },
                        ],
                    },
                    {
                        model: "birth",
                        label: "出生日期",
                        type: "date",
                    },
                    {
                        model: "addr",
                        label: "地址",
                        type: "input",
                    },
                ],
                operateForm: {
                    name: "",
                    addr: "",
                    age: "",
                    birth: "",
                    sex: "",
                },
                formLabel: [
                    {
                        model: "keyword",
                        label: "",
                        type: "input",
                    },
                ],
                searchFrom: {
                    keyword: "",
                },
                tableData: [],
                tableLabel: [
                    {
                        prop: "name",
                        label: "姓名"
                    },
                    {
                        prop: "age",
                        label: "年龄"
                    },
                    {
                        prop: "sexLabel",
                        label: "性别"
                    },
                    {
                        prop: "birth",
                        label: "出生日期",
                        width: 200
                    },
                    {
                        prop: "addr",
                        label: "地址",
                        width: 320
                    }
                ],
                config: {
                    page: 1,
                    total: 30
                }
            }
        },
        methods: {
            confirm() {
                if (this.operateType === 'edit') {
                    this.$http.post("/user/edit", this.operateForm).then(res => {
                        console.log(res)
                        this.isShow = false
                        this.getList();
                    });
                } else {
                    this.$http.post("/user/add", this.operateForm).then(res => {
                        console.log(res)
                        this.isShow = false
                        this.getList();
                    });
                }
            },
            addUser() {
                this.isShow = true;
                this.operateType = 'add';
                this.operateForm = {
                    name: "",
                    addr: "",
                    age: "",
                    birth: "",
                    sex: "",
                }
            },
            getList(name = '') {
                name ? (this.config.page = 1) : '';
                this.config.loading = true;
                getUser({
                    page: this.config.page,
                    name
                }).then(({data:res}) => {
                    this.tableData = res.list.map(item => {
                        item.sexLabel = item.sex == 0 ? '女' : '男';
                        return item;
                    })
                    this.config.total = res.count;
                    this.config.loading = false;
                })
            },
            editUser(row) {
                this.operateType = 'edit';
                this.isShow = true;
                this.operateForm = row;
            },
            delUser(row) {
                this.$confirm('此操作讲永久删除该组件，是否继续删除',{
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(()=>{
                    const id = row.id;
                    this.$http.get('/user/del',{
                        params:{id}
                    }).then(res=>{
                        console.log(res)
                        if (res.data.code === 20000) {
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            this.getList()
                        }
                    })
                })
            }
        },
        created(){
            this.getList()
        }
    }
</script>

<style>
  .manage{
    margin-top: 20px;
  }
</style>
